@extends('admin::layouts.master')
@section('content')
    <div class="card">

        <form action="/basic/base_reply" method="post">
            {{--从微信服务类中引的模板--}}
            {!! $view !!}

            <div id="appa">
                <div class="card-header">回复列表管理</div>
                <ul role="tablist" class="nav nav-tabs">
                    <li class="nav-item"><a href="/basic/base_reply" class="nav-link">回复列表列表</a></li>
                    <li class="nav-item"><a href="#" class="nav-link active">添加回复列表</a></li>
                </ul>
                <div class="card-body card-body-contrast" v-for="(m,n) in contents">
                    @csrf
                    <div id="tfather" class="form-group row" >
                        <div class="col-12 col-md-9">
        <textarea  rows="3" class="form-control form-control" v-model="m.content"></textarea>
                        </div>

                        <span class="mdi mdi-close form-control-feedback mt-3 ml-1" style="font-size: 50px;color: red" @click="dela(n)"></span>

                    </div>
                    <a href="javascript:;" @click="biaoqing()">表情</a>
                </div>
                <button class="btn btn-secondary  text-left mt-2" type="button" @click="adda()">添加回复</button>

            <textarea name="content" hidden>@{{contents}}</textarea>
                
            </div>
            <div class="card-footer text-success text-center">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
        </form>
    </div>
@endsection

@section('script')

    <script>
        require(['vue','hdjs'],function (vue,hdjs) {
            new vue({
                el: '#appa',
                data: {
                    contents: [{content: ''}]
                },
                methods: {
                    // 添加回复内容
                    adda(){
                        this.contents.push({content:''})
                    },
                    // 删除回复内容
                    dela(n){
                        this.contents.splice(n,1)
                    },
                    // vue钩子函数
                    mounted() {
                        this.biaoqing();
                    },
                    updated(){
                        this.biaoqing();
                    },
                    // 添加表情
                    biaoqing(){
                        var that = this;
                        // console.log(that);
                        // 循环给每一个回复框加表情
                        $('textarea').each(function () {
                            // console.log(this)
                            // var aa = $(this).parents('#tfather').next('a');
                            // console.log(aa);
                            hdjs.emotion({
                                //点击的元素，可以为任何元素触发
                                btn: $(this).parents('#tfather').next('a'),
                                //选中图标后填入的文本框
                                input: $(this),
                                //选择图标后执行的回调函数
                                callback: function (con, btn, input) {
                                    // console.log('选择表情后的执行的回调函数');
                                    var index = $(input).index('#appa textarea');
                                    // console.log(index);可以得到下标,把表情的中文标识存到content，到时候往数据库当中存
                                    that.contents[index].content = $(input).val()
                                }
                            });
                        })
                    }
                }
            })
        })
    </script>


    @endsection

